<template>
  <el-dialog top="1vh" :title="setting.title[setting.mode]" :visible.sync="setting.dialogVisible" :close-on-click-modal="false" append-to-body custom-class="trace-dailog" @open="onOpenCallback" @close="onCloseCallback">

    <el-tabs v-model="activeTab" @tab-click="handleClick" type="card">
      <el-tab-pane label="跟进记录" name="following" v-if="this.setting.mode === 'edit'">
        <channel-table-info :channel-id="setting.row.id"></channel-table-info>
      </el-tab-pane>

      <el-tab-pane label="渠道基本信息" name="info">
        <channel-detail-info :row="setting.row" @close-detail="onClose" ref="channeldetail" @reflash-top-table="reflashTopTable"></channel-detail-info>
      </el-tab-pane>

      <el-tab-pane label="渠道价值分析" name="value">
        <channel-detail-value :row="setting.row" @close-detail="onClose" ref="channeldetailvalue" @reflash-top-table="reflashTopTable"></channel-detail-value>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button type="info" size="small" @click="onClose">关 闭</el-button>
      <el-button size="small" @click="onNext" v-if="activeTab === 'following'">下一页</el-button>

      <el-button size="small" @click="onNextV"  v-if="activeTab === 'info'">下一页</el-button>
      <el-button type="primary" size="small" @click="onSaveBaseInfo" v-if="activeTab === 'info'">保存基本信息</el-button>
      <el-button type="warning" size="small" @click="onSaveBaseInfoEClose" v-if="activeTab === 'info'">保存基本信息并关闭</el-button>

      <el-button type="primary" size="small" @click="onSaveValueInfo" v-if="showSaveValueBut">保存价值分析</el-button>
      <el-button type="warning" size="small" @click="onSaveValueInfoEClose" v-if="showSaveValueBut">保存价值分析并关闭</el-button>

    </div>
  </el-dialog>
</template>

<script>
    import Bus from '@/utils/bus'
    import { mapGetters } from 'vuex'
    import ChannelDetailInfo from "./channel-detail-info"
    import ChannelDetailValue from "./channel-detail-value"
    import ChannelTableInfo from "./channel-table-info"
    import {getChannelimportanceById} from "@/api/channel"

    export default {
      name: "channel-dailog",
      data() {
        return {
          setting: {
            title: {add: '添加渠道',edit:'编辑渠道'},
            mode: 'add',
            loadding: false,
            dialogVisible: false, // dailog状态
            channelId: null,
            row:null,
            maturity: '',
            advancingState: ''
          },
          activeTab: 'following' // tag标签默认选中跟踪记录
        }
      },
      beforeMount() {
        Bus.$on('open-channel-dailog', (row) => {
          this.setting.dialogVisible = true
          this.setting.row = row
          this.setting.mode = row ? 'edit': 'add'
        })
      },
      computed: {
        ...mapGetters([
          'userInfo'
        ]),
        showSaveValueBut(){
          return this.activeTab === 'value' && this.$refs.channeldetailvalue.channelInfoForm && this.$refs.channeldetailvalue.channelInfoForm.id
        }
      },
      methods: {
        reflashTopTable() {
          this.$emit('reflash-top-table')
        },
        // 关闭dailog
        onClose() {
          this.setting.dialogVisible = false
        },
        // 修改内容提交确定
        onChange() {
          switch (this.setting.mode) {
            case 'add':
              this.$refs.channeldetail.addChannelInfo()
              break;
            case 'edit':
              this.$refs.channeldetail.updateChannelInfo()
              break;
          }
        },

        async onSaveBaseInfo(){
          if(this.setting.mode == 'add'){
            if(!this.$refs.channeldetailvalue.channelInfoForm.id) {
              var id = await this.$refs.channeldetail.addChannelInfo()
              this.$refs.channeldetailvalue.channelInfoForm.id = id
            }else {
              await this.$refs.channeldetail.updateChannelInfo()
            }
          }

          if(this.setting.mode == 'edit') {
            await this.$refs.channeldetail.updateChannelInfo()
          }
        },

        async onSaveBaseInfoEClose(){
          try {
            await this.onSaveBaseInfo()
            this.setting.dialogVisible = false
          }catch (e) {

          }
        },

        async onSaveValueInfo() {
          try {
            await this.$refs.channeldetailvalue.updateChannelInfo()
            if (this.setting.mode == 'add') {
              reflashTopTable()
            }
          } catch (e) {
            // console.log(1)
          }
        },

        async onSaveValueInfoEClose() {
          try {
            await this.$refs.channeldetailvalue.updateChannelInfo()
            this.setting.dialogVisible = false
          } catch (e) {
            // console.log(2)
          }
        },
        // 打开dailog回调
        onOpenCallback() {
          if (this.setting.mode === 'add') {
            this.activeTab = 'info'
            if(this.$refs.channeldetail) {
              this.$refs.channeldetail.initChannelInfo()
              // this.$refs.channeldetail.fromResetField()
              this.$refs.channeldetailvalue.initChannelInfo()
              // this.$refs.channeldetailvalue.fromResetField()
            }
          }
          if (this.setting.mode === 'edit') {
            this.activeTab = 'following'
          }
        },
        // 关闭dailog回调
        onCloseCallback() {
          this.$refs.channeldetail.clearValidate()
          this.$refs.channeldetailvalue.clearValidate()
          this.reflashTopTable()
          return
      /*    this.$emit('close-dialog')
          // 关闭对话框,重置项目信息验证消息
          this.$refs.channeldetail.fromResetField()
          this.$refs.channeldetailvalue.fromResetField()
          this.$refs.channeldetailvalue.rate = {
            Region : null,
            Cooperate : null,
            Cooperated : null,
            Buied : null,
            Approve : null,
            Relation: null
          }*/
        },

        async setChannelimportanceValue(){
          var res = await getChannelimportanceById({channelid:this.setting.row.id})
          if (res.data.success) {
            const result = res.data && res.data.data && res.data.data[0] || {}
            this.$refs.channeldetailvalue.rate = {
              Region : parseFloat(result.impRegion),
              Cooperate : parseFloat(result.impCooperate),
              Cooperated : parseFloat(result.impCooperated),
              Buied : parseFloat(result.impBuied),
              Approve : parseFloat(result.impApprove),
              Relation: parseFloat(result.impRelastion)
            }
          }
        },

        // Tag标签点击事件
        handleClick(tab) {
          if (tab.name === 'info' && this.setting.mode === 'edit') {
            this.$refs.channeldetail.channelInfoForm = this.setting.row
          }

          if (tab.name === 'value' && this.setting.mode === 'edit') {
            this.$refs.channeldetailvalue.channelInfoForm = this.setting.row
            this.setChannelimportanceValue()
          }
        },

        // 下一步
        onNext() {
          this.activeTab = 'info'
          this.$refs.channeldetail.channelInfoForm = this.setting.row;
        },

        onNextV() {
          this.activeTab = 'value'
          // this.$refs.channeldetailvalue.channelInfoForm.id = 1
          if(this.setting.mode === 'edit'){
            this.$refs.channeldetailvalue.channelInfoForm = this.setting.row;
            this.setChannelimportanceValue()
          }
        }
      },
      components : {
        ChannelTableInfo,
        ChannelDetailInfo,
        ChannelDetailValue
      }
    }
</script>

<style scoped>

</style>
